<template>
  <div class="jing">
    <van-cell title="精选医生" is-link value="查看更多" @click="toWen" />
    <div class="jing_icon">
      <div class="jing_for" v-for="item in docters" :key="item" @click="toDetail(item)">
        <div class="jing_for1">
          <img v-lazy="item.doctor_info.image" alt="" width="60%" />
        </div>
        <div class="jing_for2">
          <p style="background-color: white">{{ item.doctor_info.name }}</p>
          <p class="jing_for2_p">
            {{ item.doctor_info.title }}
          </p>
          <p class="jing_for2_p">
            {{ item.doctor_info.hospital_name }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { getSelectDocter } from '../../../api/http'
import { useRouter } from 'vue-router'

const router = useRouter()
// 问医生
const toWen = () => {
  router.push('/wDoctor');
};

//医生详情
const toDetail = (item:any) => {
  router.push({
    path: `/detail`,
    query: { item: JSON.stringify(item) }
  });
};
//精选医生
const docters = ref([])

//获取医生
getSelectDocter().then((res) => {
  // console.log(res.data);
  docters.value = res.data.doctors;
});
</script>

<style lang="scss" scoped>
//精选医生
.jing {
  width: 100%;
  height: 220px;
  background-color: white;
  // margin-top: 10px;

  .jing_icon {
    width: 100%;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
  }

  .jing_for {
    width: 50%;
    height: 50%;
    display: flex;

    .jing_for1 {
      flex: 1;

      img {
        border-radius: 50%;
      }

      background-color: white;
    }

    .jing_for2 {
      flex: 2;
      background-color: white;
    }

    .jing_for2_p {
      font-size: 12px;
      background-color: white;
    }
  }
}
</style>